<template>
  <div class="addstage">
    <el-dialog :visible.sync="dialog" :before-close="handleClose" title="添加资产" width="980px">
      <div class="search-wrap clearfix">
        <span>
          <treeselect
            :options="courseOptions"
            :multiple="true"
            :flatten-search-results="true"
            :normalizer="normalizer"
            v-model="listQuery.assetsCategories"
            placeholder="请添加资产"
            style="width:400px;display:inline-block;float:left;margin-right:3px;"
            @change="handleFilter"
          />
        </span>
        <el-input v-model="listQuery.assetsUnitName" style="width:140px;" placeholder="资产名" @keyup.enter.native="handleFilter"/>
        <el-button type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      </div>
      <div class="list-wrap">
        <ul class="detail-learn-subject">
          <template v-for="(item,index) in list">
            <li :key="index" class="detail-learn-subject-list">
              <el-row :gutter="20">
                <el-col :span="5">
                  <img v-if="item.imgUrl" :src="item.imgUrl" alt style="width:100%;height:100%;">
                  <img v-if="!item.imgUrl" src="../../../../../../assets/subjectImg.png" style="width:100%;">
                </el-col>
                <el-col :span="13">
                  <span class="content-title">{{ item.name }}</span>
                  <span
                    :style="item.assetsType === 'broadcast'? recordWay: onWay"
                    class="content-way"
                  >{{ item.assetsType === 'live'? '直播' : '录播' }}</span>
                  <p style="color:#c6c6c7">{{ item.description }}</p>
                </el-col>
                <el-col :span="6">
                  <div class="right-wrap">
                    <div class="class-checkbox">
                      <span
                        style="color:#f24e4e;font-size:16px;margin-right:20px;"
                      >{{ item.price }}元</span>
                      <el-checkbox v-model="item.checked"/>
                    </div>
                    <div class="class-detail">课时: {{ item.duration }}</div>
                  </div>
                </el-col>
              </el-row>
            </li>
          </template>
        </ul>
        <el-pagination
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :total="total"
          background
          layout="total, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handlePush">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getAssetsUnitAllList, getCategoryTreeList } from '@/api/subject/digitalAssets' // 接口
import { getTenantId, getUserId } from '@/utils/auth'
export default {
  components: { Treeselect },
  props: {
    visibleDialog: {
      type: Boolean,
      default: false
    },
    stageAddAssets: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      listQuery: {
        assetsCategories: [],
        assetsUnitName: ''
      },
      list: [],
      filterList: [],
      recordWay: { backgroundColor: '#f89e29' },
      onWay: { backgroundColor: '#4297ff' },
      courseOptions: []
    }
  },
  computed: {
    dialog() {
      return this.visibleDialog
    },
    total() {
      return this.list.length
    }
  },
  created() {
    this.getList()
    this.getCategoryTreeList()
  },
  methods: {
    getList() {
      getAssetsUnitAllList(getUserId()).then(res => {
        this.list = res.data.items
        this.filterList = res.data.items
      })
    },
    handleFilter() {
      this.list = this.filterList.filter(item => {
        if (this.listQuery.assetsCategories) {
          let flag = false
          for (const index in this.listQuery.assetsCategories) {
            if (this.listQuery.assetsCategories[index].toString() === item.categoryId.toString()) {
              flag = true
            }
          }
          if (!flag) return false
        }
        if (this.listQuery.assetsUnitName && item.name.toLowerCase().indexOf(this.listQuery.assetsUnitName.toLowerCase()) < 0) return false
        return true
      })
    },
    getCategoryTreeList() {
      getCategoryTreeList('course', getTenantId()).then(res => {
        this.courseOptions = res.data.items
      })
    },
    normalizer(node) {
      return {
        label: node.name
      }
    },
    handleClose() {
      this.$emit('close')
    },
    handlePush() {
      const categoryIds = []
      for (const index in this.stageAddAssets.children) {
        categoryIds.push(this.stageAddAssets.children[index].categoryId)
      }
      for (const index in this.list) {
        if (this.list[index].checked && categoryIds.indexOf(this.list[index].categoryId) < 0) {
          this.stageAddAssets.children.push(this.list[index])
        }
      }
      this.$emit('push', this.stageAddAssets)
      this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

<style lang="scss" scoped>
.clearfix:after {
  content: '';
  height: 0;
  line-height: 0;
  display: block;
  visibility: hidden;
  clear: both;
}
.addstage {
  .el-dialog {
    border-radius: 5px;
    .search-wrap {
      margin-bottom: 20px;
    }
    .list-wrap {
      .detail-learn-subject {
        padding: 0 25px;
        margin: 0;
        width: 100%;
        list-style: none;
        &-list {
          height: 120px;
          padding: 10px 10px 24px 10px;
          border: 1px solid #dcdfe6;
          border-radius: 3px;
          margin-bottom: 20px;
          .el-col {
            height: 100px;
            position: relative;
            span.content-way {
              // position: absolute;
              // bottom: 5px;
              color: #fff;
              font-size: 14px;
              padding: 2px 10px;
              margin-left: 10px;
              border-radius: 5px;
            }
            .right-wrap {
              width: 100%;
              height: 100%;
              position: relative;
              .class-checkbox {
                font-size: 20px;
                position: absolute;
                right: 0;
                cursor: pointer;
              }
              .class-detail {
                position: absolute;
                right: 0;
                bottom: 10px;
                .el-checkbox__label {
                  color: #3d3d3d;
                  font-size: 18px;
                }
              }
            }
          }
          .content-title {
            color: #3d3d3d;
            font-size: 16px;
          }
          p {
            margin: 0;
            margin-top: 30px;
            font-size: 14px;
            color: #8a8b8c;
          }
        }
      }
    }
  }
}
</style>
